<template>
  <!-- 验收编辑 -->
  <div>
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >供应链管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkmanagement' }"
          >验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkManagement/materialRentManage/list' }"
          >物资租赁验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkManagement/materialRentManage/list' }"
          >验收维护</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>编辑</span>
          <span class="ccui-curr-crumb ccui-ml-10">{{
            acceptanceCertBO.acceptanceName
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- tab切换 -->
    <div class="ccui-app-container-detail2">
      <div class="center-information ccui-app-container-detail-body">
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <el-tab-pane label="基本信息" name="first">
            <!-- 基本信息 -->
            <base-info
              ref="baseInfo"
              @tbdwChange="tbdwChange"
              :fromData="acceptanceCertBO"
            />
          </el-tab-pane>
          <el-tab-pane label="采购清单" name="second">
            <!-- 采购清单 -->
            <inventory 
              ref="inventory" 
              :listData="acceptanceBillBOList" 
              :acceptanceTypeCode="acceptanceCertBO.acceptanceTypeCode"
            />
          </el-tab-pane>
          <el-tab-pane label="附件信息" name="third">
            <!-- 附件信息 -->
            <update
              ref="update"
              @yanshou="acceptanceUploadIdsEvent"
              @fujian="otherUploadIdsEvent"
              :fileList="fileList"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer">
      <el-bottom-guide v-if="$route.query.status !== '查看'">
        <ul class="ccui-bottom-button">
          <li>
            <el-button type="bottom" icon="icon-ccui-save" @click="save(0)"
              >保存并校验
            </el-button>
          </li>
          <li>
            <el-button type="bottom" icon="icon-ccui-save" @click="save(1)"
              >保存并提交
            </el-button>
          </li>
          <li>
            <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
              >返回
            </el-button>
          </li>
        </ul>
      </el-bottom-guide>
      <!--  底部导航栏及签名导出  -->
      <bottomGuide
        v-if="$route.query.status === '查看'"
        busiType="102"
        approvalStatus="approvaled"
        exportMethod="get"
        methodGetPageType="exportAcceptanceOrder"
        :curPageId="$route.query.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
    </div>
  </div>
</template>

<script>
import baseInfo from "../common/components/baseInfo.vue";
import inventory from "../common/components/inventory.vue";
import update from "../common/components/update.vue";
import publicComponent from "@/basa/components/public";
import { editAcceptanceCert, getAcceptanceCert } from "../common/api/index";

export default {
  data() {
    return {
      activeName: "first",
      businessCode: "",
      acceptanceCertBO: {},
      acceptanceBillBOList: [],
      fileList: [],
      acceptanceUploadIds: [],
      otherUploadIds: []
    };
  },
  components: {
    baseInfo,
    inventory,
    update,
    bottomGuide: publicComponent.bottomGuide
  },
  activated() {
    this.getDetail();
    this.activeName = "first";
  },
  deactivated() {
    this.$refs.baseInfo.ruleForm = {};
    this.$refs.inventory.tableData = [];
    this.$refs.update.tableData = [];
  },
  methods: {
    tbdwChange() {
      this.$refs.inventory.clearTable();
      this.$refs.update.tableData = [];
    },
    // 详情查看接口
    getDetail() {
      getAcceptanceCert({ id: this.$route.query.id }).then(res => {
        const {
          acceptanceBillBOList,
          acceptanceCertBO,
          sceneFiles,
          otherFiles
        } = res.data.data;
        // 日期
        acceptanceCertBO.compileDate = new Date(
          acceptanceCertBO.compileDate.replace(/-/g, "/")
        ).getTime();
        this.acceptanceCertBO = acceptanceCertBO;
        delete acceptanceCertBO.submitTime;
        this.$store.commit("setContractId", acceptanceCertBO.contractId);
        this.$store.commit("setContractCode", acceptanceCertBO.contractNumber);
        // 验收地点
        acceptanceBillBOList.forEach(item => {
          item.qingdanId = item.materialId;
          // 验收日期ie回显
          item.acceptanceDate = new Date(
            item.acceptanceDate.replace(/-/g, "/")
          ).getTime();
          // 验收地点
          item.province = item.provinceCode;
          item.city = item.cityCode;
          item.county = item.countyCode;

          // 拼接地址
          item.testdaohuo =
            item.areaName +
            item.provinceName +
            item.cityName +
            item.countyName +
            item.acceptancePlace;
        });
        this.acceptanceBillBOList = acceptanceBillBOList;

        // 附件处理
        otherFiles.forEach(item => {
          item.fileClass = "其他";
        });
        sceneFiles.forEach(item => {
          item.fileClass = "现场验收单";
        });
        let updateList = [...sceneFiles, ...otherFiles];
        updateList.forEach(item => {
          new Date(item.uploadTime.replace(/-/g, "/")).getTime();
        });
        updateList.sort((a, b) => {
          return a.sn - b.sn;
        });
        this.fileList = updateList;
      });
    },
    // 返回
    handleBack() {
      this.$router.push({ path: "/checkManagement/materialRentManage/list" });
    },
    // 现场验收单附件
    acceptanceUploadIdsEvent(res) {
      this.acceptanceUploadIds = res ? res : [];
    },
    // 其它附件
    otherUploadIdsEvent(res) {
      this.otherUploadIds = res ? res : [];
    },
    // 保存或提交
    async save(type) {
      let baseInfo, inventory, update;
      try {
        baseInfo = await this.$refs.baseInfo.positionFrom();
        inventory = await this.$refs.inventory.positionFrom();
        update = await this.$refs.update.positionFrom();
      } catch (error) {
        this.activeName = error.isFocus;
        const errorDom = document.body.querySelector(".is-error");
        if (errorDom) {
          errorDom.scrollIntoView();
        }
      }
      if (baseInfo !== "成功") return;
      if (inventory !== "成功") return;
      if (update !== "成功") return;

      this.$refs.baseInfo.ruleForm.submitStatus = type;
      // 验收类型
      this.$refs.baseInfo.ruleForm.businessType = "3";
      this.$refs.baseInfo.ruleForm.acceptanceTypeCode = "3";
      this.$refs.baseInfo.ruleForm.acceptanceType = "按合同验收";

      const obj = {
        acceptanceCertBO: this.$refs.baseInfo.ruleForm,
        acceptanceBillBOList: this.$refs.inventory.tableData,
        otherUploadIds: this.otherUploadIds,
        acceptanceUploadIds: this.acceptanceUploadIds,
        version: this.$refs.baseInfo.ruleForm.version
      };

      editAcceptanceCert(obj).then(res => {
        this.$message.success(res.data.message);
        this.$router.push({
          path: "/checkManagement/materialRentManage/list"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 60px;
}
</style>
